<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #allmap {
            width: 100%;
            height: 800px;
        }

        p {
            margin-left: 5px;
            font-size: 14px;
        }
    </style>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=FHe6beuWMBRk4oOTOKyrhcLqlGjmrh0O"></script>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <title>给多个点添加信息窗口</title>
</head>
<body>
<!-- 表格 -->
<div style="width:1680px;background-color:#333;margin:0 auto;">
    <!--左侧内容-->
    <div class="table-box" style="width:50%;height:800px;float:left;">
        <table id="contentTable" class="table table-striped table-bordered table-hover table-condensed dataTables-example dataTable">
            <thead>
            <tr>
                <th> <input type="checkbox" class="i-checks"></th>
                <th  class="sort-column type">序号</th>
                <th  class="sort-column type">提货时间</th>
                <th  class="sort-column type">提货地址</th>
                <th  class="sort-column type">托运人</th>
                <th  class="sort-column type">下单日期</th>
                <th  class="sort-column type">要求车型</th>
                <th  class="sort-column type">总重量</th>
                <th  class="sort-column type">总方量</th>
                <th  class="sort-column type">备注</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${orderDistanceList}" var="orderDistanceList">
                <tr>
                    <td> <input type="checkbox" id="${orderDistanceList.id}" class="i-checks"></td>
                    <!--序号	-->
                    <td>
                            ${orderDistanceList.id}
                    </td>
                    <!--	提货时间-->
                    <td>
                            ${orderDistanceList.pickDate}
                    </td>
                    <!--提货地址	-->
                    <td>
                            ${orderDistanceList.pickAddress}
                    </td>
                    <!--托运人-->
                    <td>
                            ${orderDistanceList.goodsCompany}
                    </td>
                    <!--下单日期-->
                    <td>
                            ${orderDistanceList.orderDate}
                    </td>
                    <!--要求车型-->
                    <td>
                            ${orderDistanceList.truckType}
                    </td>
                    <!--总重量-->
                    <td>
                            ${orderDistanceList.totalWeight}
                    </td>
                    <!--总方量-->
                    <td>
                            ${orderDistanceList.totalVolume}
                    </td>
                    <!--备注-->
                    <td>
                            ${orderDistanceList.remarks}
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
    <!--右侧内容-->
    <div style="width:50%;height:800px;float:right;">
        <div id="allmap"></div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(116.417854, 39.921988), 15);
    var data_info = [[116.417854, 39.921988, "地址：北京市东城区王府井大街88号乐天银泰百货八层"],
        [116.406605, 39.921585, "地址：北京市东城区东华门大街"],
        [116.412222, 39.912345, "地址：北京市东城区正义路甲5号"]
    ];
    var opts = {
        width: 250,     // 信息窗口宽度
        height: 80,     // 信息窗口高度
        title: "信息窗口", // 信息窗口标题
        enableMessage: true//设置允许信息窗发送短息
    };
    for (var i = 0; i < data_info.length; i++) {
        var marker = new BMap.Marker(new BMap.Point(data_info[i][0], data_info[i][1]));  // 创建标注
        var content = data_info[i][2];
        map.addOverlay(marker);               // 将标注添加到地图中
        addClickHandler(content, marker);
    }
    function addClickHandler(content, marker) {
        marker.addEventListener("click", function (e) {
                openInfo(content, e)
            }
        );
    }
    function openInfo(content, e) {
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
        map.openInfoWindow(infoWindow, point); //开启信息窗口
    }
</script>
